<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<!-- include "header" -->	
	<script type="text/javascript" src="{{baseurl}}global/js/frb-popup-shadow/frb-popup-shadow.js"></script>
	<link rel="stylesheet" type="text/css" href="{{baseurl}}global/css/frb-popup-shadow/frb-popup-shadow.css">
	<link rel="stylesheet" type="text/css" href="{{baseurl}}global/css/frb-slide-header/frb-slide-header.css">
	<script type="text/javascript" src="{{baseurl}}global/js/frb-slide-header/frb-slide-header.js"></script>
	<script type="text/javascript" src="{{baseurl}}global/js/jquery-ui-1.8.16.custom.min.js"></script>
	<script type="text/javascript" src="{{baseurl}}global/js/jquery-datepicker-fr.js"></script>
	<script type="text/javascript" src="{{baseurl}}global/js/frb-scroll-text.js"></script>
	<link rel="stylesheet" type="text/css" href="{{baseurl}}global/css/datepicker/jquery-ui-1.8.16.datepicker.css">
</head>

<body>
<div id="maximize-ph"> <div id='maximize-ph-pic'><div id="maximize-ph-close">fermer X</div><img id="max-pic" src="" alt="Agrandir image"></div></div>
	<!-- include "no-script" -->
	<!-- <div class="main-site-top-shadow"></div> -->
	<div id="main-site-shadow">
		<div id="main-site" class='main-site-bottom-appartements'>
			<!-- include 'menu' -->
			<div id='main-site-content-appartements'>
				<div id='main-site-content-appartements-title'><h1 class='shrink-bottom shrink-top'>Appartements disponibles</h1></div>
				<div id='main-site-content-appartements-list'> 					
					<ul id='component-thumbs-viewer-ul'>
					<!-- loop random -->
						<li class='component-thumbs-viewer-li'>
							<img src="{{baseurl}}global/img/appartements/pictures/thumbnails/{{random' value.photo_name}}" title='Appartement disponible' alt="Appartement disponible">
							<input type='hidden' name='appart' value="{{random' value.id_appart}}" class='component-thumbs-viewer-li-shadow-id'>
							<div class="component-thumbs-viewer-li-shadow">{{random' value.surface}} m² <div><img class='component-thumbs-viewer-li-shadow-view' src='{{baseurl}}global/img/appartements/plus.png' title='Visualiser' alt='Visualiser'></div></div>
						</li>
					<!-- endloop -->
					</ul>
				</div>
				<div id='main-site-content-appartements-content'>
					<div id='main-site-content-appartements-content-image'> <img src='{{baseurl}}global/img/plan/theatre.jpg' alt='Immeuble rue theatre français'></div>
					<div id='main-site-content-appartements-content-text'>
						<div id='main-site-content-appartements-content-text-searchengine' class="{{dispo-class}}">
							{{dispo-text}}
						</div>
						<div id='main-site-content-appartements-content-text-flatZone'>
							<!-- loop flats -->
							<div class='main-site-content-appartements-content-text-flat'>							
									<div style='display: none' class='flat-ref'>{{flats' value.@cha_id}}</div>
									<div class="main-site-content-appartements-content-text-flat-preview">
										<img class="flats-picture-preview-tc" src="{{baseurl}}global/img/appartements/pictures/thumbnails/<? echo $data['pictures'][$v1->cha_id]['pictures'][0]?>"" alt='<? echo $data['pictures'][$v1->cha_id]['alt']?>'>
										<div class='main-site-content-appartements-content-tex-flat-content'>
											<div class='main-site-content-appartements-content-tex-flat-content-line'><span class='bold'>Emplacement </span>: {{flats' value.@FrbFlatImmeuble.@imm_adr}} à Marseille</div>
											<div class='main-site-content-appartements-content-tex-flat-content-line'><span class='bold'>Surface</span> : {{flats' value.@cha_surf}} m²</div>
											<div class='main-site-content-appartements-content-tex-flat-content-line'> 
												<span class='bold'>Loyer à l'année</span> : {{flats' value.@cha_loy_low}} €/mois 
												<span class='bold'> Pleine saison </span>: <a href='{{baseurl}}contact' class='frb-popup-shadow'>nous contacter</a></div>
											<div class='main-site-content-appartements-content-tex-flat-content-line'><span class='bold'>Description : </span>{{flats' value.@cha_det}}</div>
										</div>
										
								</div>
								<div class="show-detail">Cliquez ici pour en savoir plus</div>
								<div class="main-site-content-appartements-content-text-flat-images"></div>
							</div>
							<!-- endloop -->
						</div>
					</div>
				</div>
				<div id='main-site-content-appartements-content-pagination'><a href="{{baseurl}}recherche-appartements-marseille.html?page={{link_fpage}}" class='component-personal-button'><</a> Page {{fpage}}/{{lpage}} <a href="{{baseurl}}recherche-appartements-marseille.html?page={{link_lpage}}" class='component-personal-button'>></a></div>
			</div>
		</div>
	</div>
	<!-- include "menuBottom" -->

<script type="text/javascript">
$(document).ready(function(){
	function reLoad(urlApp, data){
		$('#main-site-content-appartements-content-text-flatZone').fadeOut('slow', function(){
			$.ajax({
				urlApp: url,
				type: 'POST',
				cache: false,
				data: data,
				success: function(html){
				s = html.search("#~ind");	
				if(s != -1){
					//page = html.substring(5, s);
					//html = html.substring(s+5, html.lentgh);
				}				
				  $('#main-site-content-appartements-content-text-flatZone').html(html);
				}
			});
			$('#main-site-content-appartements-content-text-flatZone').fadeIn('slow');
		});
	}
	
	$('.frb-popup-shadow').frbPopupShadow({
		link : 'contact',
		host : '{{baseurl}}',
		currentPage : 'recherche-appartements-marseille.html'
	});
	
	var oldToggle=null;
	
	$('.show-detail').click(function(){
		t = $(this).parent(".main-site-content-appartements-content-text-flat");
		var flat = t.children(".flat-ref").html();
		if(t.css('height') == '100px'){
			t.prevAll('.main-site-content-appartements-content-text-flat').hide('normal');
			t.animate({height : '300px'});
			if(oldToggle != null)
				oldToggle.animate({height : '100px'});
			oldToggle = t;
			$.ajax({
				url: '{{baseurl}}getFlatPictures?flat='+flat,
				type: 'GET',
				cache: false,
				success: function(html){
					t.children(".main-site-content-appartements-content-text-flat-images").html(html);
				}
			});
		}else if(t.css('height') == '300px'){
			oldToggle = null;
			t.animate({height : '100px'});
			$('.main-site-content-appartements-content-text-flat').show('normal');
		}
	});

	$('#search-engine-surface-valid').click(function(){
		urlApp = '{{baseurl}}recherche-appartements-marseille.html';
		data = $('.choice').serialize();
		reLoad(urlApp, data);
	});

	$('.component-thumbs-viewer-li').click(function(){
		var appart = $(this).children(".component-thumbs-viewer-li-shadow-id").val();
		$.ajax({
			url: "{{baseurl}}recherche-appartements-marseille.html",
			type: 'post',
			cache: false,
			data: 'act=rand&appart='+appart,
			success: function(html){
				$("#main-site-content-appartements-content-text-flatZone").fadeOut(function(){
					$(this).html(html);
					$("#main-site-content-appartements-content-pagination").fadeOut();
					$(this).fadeIn();
				});
			}
		});
	});

	$("#maximize-ph-close").click(function(){
		$("#maximize-ph").css("display", "none");
	});	
});
</script>	
</body>
</html>